<template>
  <input type="text" v-model="title" />
  <button @click="btnClick">点击</button>
  <div>
    <span ref="spanRef">{{ msg }}</span>
  </div>
</template>

<script>
import { ref, onMounted, nextTick, onUpdated } from 'vue'
export default {
  setup() {
    const title = ref('')
    const msg = ref('哈哈哈')
    const spanRef = ref(null)
    onMounted(() => {
      console.log('在onMounted中监听', spanRef.value.offsetWidth)
    })
    const btnClick = () => {
      msg.value += '哈哈哈'
      console.log('在btnClick中监听', spanRef.value.offsetWidth)
      queueMicrotask(() => {
        console.log('在queueMicrotask中监听', spanRef.value.offsetWidth)
      })
      // 在页面dom更新完成之后回调
      nextTick(() => {
        console.log('在nextTick中监听', spanRef.value.offsetWidth)
      })
    }
    onUpdated(() => {
      console.log('在onUpdated中监听', spanRef.value.offsetWidth)
    })
    return {
      msg,
      btnClick,
      spanRef,
      title,
    }
  },
}
</script>

<style scoped></style>
